import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Icon, Input, Button, Select, Alert, Row, Col } from 'antd';
import { connect } from 'dva';
const { TextArea } = Input;
const { Option } = Select;

export default class Comform extends React.Component<any, any> {
  static defaultProps = {
    view: {},
  };
  handleSubmit = () => {
    const { dispatch, close, submit, view } = this.props;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        const data = {
          ...values,
          reserveBalanceQty: Number(values.reserveBalanceQty),
          saleQty: Number(values.saleQty),
        };
        close && close();
        submit && submit(view, data);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label={'酒品id'} style={{ display: 'none' }}>
          {getFieldDecorator('id', {})(<Input />)}
        </Form.Item>
        <Form.Item label={'酒名：'}>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入酒类名' }],
          })(<Input placeholder="请输入酒类名" />)}
        </Form.Item>
        <Form.Item label={'备注'}>
          {getFieldDecorator('comments', {
            rules: [],
          })(<TextArea rows={4} placeholder="请输入描述性信息" />)}
        </Form.Item>
        <Form.Item label={'储存数量'}>
          {getFieldDecorator('reserveBalanceQty', {
            rules: [],
          })(<Input type="number" />)}
        </Form.Item>
        <Form.Item label={'售出数量'}>
          {getFieldDecorator('saleQty', {
            rules: [],
          })(<Input type="number" />)}
        </Form.Item>
      </Form>
    );
  }
}

// export default connect(() => ({}))(Form.create()(Comform));
